<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="__PUBLIC__/Image/logo.ico">

    <title>账户资料</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/Css/lib/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/Css/lib/bootstrap-datetimepicker.min.css" rel="stylesheet"  media="screen">
     <!-- 自定义公共CSS -->
    <link href="__PUBLIC__/Css/Index/common.css" rel="stylesheet" type="text/css">
    <style type="text/css">
		.contains{
			background-color:#22AB39;
		}
		
		body{
			line-height:1.1;
		}
		
		.strong{
			font-size:50px;
		}
		
		.small{
			font-size:25px;
		}
		
		a{
			color:white;
			font-weight:bold;
		}
		
		.label-title,
		.label-info-other,
		.label-operation{
			color:#D0F9FC;
			font-size:25px;
			font-weight:100;
			padding-right: 0;
		}
		
		/*标题*/
		.label-title{
			width:80px;
		}
		
		/*内容*/
		.label-info-other{
			padding-left:0;
		}
		
		/*操作*/
		.label-operation{
			color:#E0EE37;
		}
		
		.form-group{
			margin-bottom:10px;
		}
		
		.form-group select,
		.form-group input{
			border:2px solid white;
			background-color:#22AB39;
			font-size:20px;
			color:white;
		}
		
		.form-group select{
			font-size:18px;
		}
		
		.info{
			padding-left:0;
		}
		
		.edit-control-btn{
			width:60px;
			color:white;
			font-size:12px;
		}
		
		.personcenter-list{
			text-align:right;
			margin-top:30px;
			font-size:40px;
			margin-right:10px;
			line-height:50px;
		}
		
		@media screen and (max-height:800px){
			.personcenter-list{
				margin-right:5px;
				line-height:45px;
			}
		}
	</style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script src="__PUBLIC__/Js/lib/jquery-1.11.2.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="__PUBLIC__/Js/lib/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script src="__PUBLIC__/Js/Index/common.js"></script>
	<script type="text/javascript">
  		$(function(){
  			// 设定日期控件
  			$('#datetimepicker').datetimepicker({
  		        language: 'zh-CN',
  		        format: "yyyy-mm-dd",
  	        	autoclose: true,
  	        	todayBtn: false,
  	        	todayHighlight: false,
	  	  		startView: 2,
	  	  		minView: 2,
  	        	pickerPosition:"bottom-right"
  		    });
  			
  			// 点击【修改】
  			$(".editBtn").click(function(){
  				$(this).parents(".show_result").css("display","none");
  				$(this).parents(".show_result").siblings(".edit_result").css("display","block");
  			});
  			
  			// 点击修改状态下的【取消】按钮
  			$(".edit-cancel-btn").click(function(){
  				$(this).parents(".edit_result").css("display","none");
  				$(this).parents(".edit_result").siblings(".show_result").css("display","block");
  			});
  			
  			// 焦点移开事件
  			$(".check-value-exist").blur(function(event){
  				if($(event.relatedTarget).hasClass("edit-cancel-btn")){
  					return false;
  				}
  				// 检查对应的值是否存在
  				var key = $(this).attr("name");
  				var value= $(this).val();
  				$.ajax({
  					url:"__URL__/checkHasExistedRtnJson",
  					type:"post",
  					data:key + "=" + value,
  					dataType:"json",
  					success:function(data){
  						if(data.status == 200){
  							//已经存在
  							alert(data.message);
  							$(this).focus();
  						} 
  					},
  					error:function(data){
  						
  					}
  				});
  			});
  			
  			// 提交整个表单
  			$("#submitBtn").click(function(){
  				// 手机号
  				if($("input[name='phone']").parents(".edit_result").css("display") =="block"){
  					$("input[name='phone']").val("");
  				} else {
  					if($.trim($("input[name='phone']").val()) == ""){
  						alert("请填写手机号!");
  						return false;
  					}
  				}
  				// 邮箱
  				var email = $("input[name='email']").val();
  				if($.trim(email) != ""){
  					// 验证邮箱格式是否正确
  					var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
  				    if(!reg.test(email)){
  				        alert("邮箱格式错误，请重新填写");
  				        $("input[name='email']").focus();
  				        return false;
  				    }

  				}
  				// 会员编号（会员名）
  				if($("input[name='user_code']").parents(".edit_result").css("display") =="block"){
  					$("input[name='user_code']").val("");
  				}
  				// 昵称
  				if($("input[name='username']").parents(".edit_result").css("display") =="block"){
  					$("input[name='username']").val("");
  				}
  				// 真实姓名
  				if($("input[name='real_name']").parents(".edit_result").css("display") =="block"){
  					$("input[name='real_name']").val("");
  				}
  				// 证件类型
  				var credentials_type = $("select[name='credentials_type'] :selected").val();
  				// 证件号
  				var credentials = $("input[name='credentials']").val();
  				if(credentials_type > 0){
  					if($.trim(credentials) == ""){
  						alert("请填写有效的证件号码！");
  						return false;
  					}
  				}
  				
  				if($.trim(credentials) != ""){
  					// 检查是否已经选择了证件类型
  					if(credentials_type == 0){
  						alert("请选择证件类型！");
  						$("select[name='credentials_type']").focus();
  						return false;
  					}
  				}
  				// 固定电话区号
  				var area_code = $("input[name='area_code']").val();
  				// 固定电话
  				var telephone = $("input[name='telephone']").val();
  				if($.trim(area_code) != ""){
  					var reg = /^0\d{2,3}$/;
  				    if(!reg.test(area_code)){
  				        alert("座机区号填写不正确，请重新填写!");
  				        $("input[name='area_code']").focus();
  				        return false;
  				    }
  				    if($.trim(telephone) == ""){
  				    	alert("请填写有效的座机号码！");
  				    	return false;
  				    }
  				}
  				if($.trim(telephone) != ""){
  					if($.trim(area_code) == ""){
  				    	alert("请填写固定电话区号!");
  				    	return false;
  				    }
			    }
  				
  				$("#personalFileForm").submit();
  			})
  		});
  		
  		// 修改手机
  		function changePhone(){
  			var phone = $("input[name='phone']").val();
  			if($.trim(phone) == ""){
  				alert("请填写手机号!");
  				return false;
  			}
  			$.ajax({
					url:"__URL__/savePhone",
					type:"post",
					data:"phone=" + phone,
					dataType:"json",
					success:function(data){
						if(data.status == 200){
							//修改成功
							alert(data.message);
							$("input[name='phone']").parents(".edit_result").siblings(".show_result").find("span").text(phone);
							$("input[name='phone']").parents(".edit_result").css("display","none");
			  				$("input[name='phone']").parents(".edit_result").siblings(".show_result").css("display","block");
						}else {
							// 修改失败
							alert(data.message);
						}
					},
					error:function(data){
						
					}
				});
  		}
  		
  		// 修改会员名
  		function changeUsercode(){
  			var user_code = $("input[name='user_code']").val();
  			if($.trim(user_code) == ""){
  				alert("请先填写会员名!");
  				return false;
  			}
  			$.ajax({
					url:"__URL__/saveUserCode",
					type:"post",
					data:"user_code=" + user_code,
					dataType:"json",
					success:function(data){
						if(data.status == 200){
							//修改成功
							alert(data.message);
							$("input[name='user_code']").parents(".edit_result").siblings(".show_result").find("span").text(user_code);
							$("input[name='user_code']").parents(".edit_result").css("display","none");
			  				$("input[name='user_code']").parents(".edit_result").siblings(".show_result").css("display","block");
						}else {
							// 修改失败
							alert(data.message);
						}
					},
					error:function(data){
						
					}
				});
  		}
  	
  	
  		// 修改昵称
  		function changeUsername(){
  			var username = $("input[name='username']").val();
  			if($.trim(username) == ""){
  				alert("请先填写昵称!");
  				return false;
  			}
  			$.ajax({
					url:"__URL__/saveUsername",
					type:"post",
					data:"username=" + username,
					dataType:"json",
					success:function(data){
						if(data.status == 200){
							//修改成功
							alert(data.message);
							$("input[name='username']").parents(".edit_result").siblings(".show_result").find("span").text(username);
							$("input[name='username']").parents(".edit_result").css("display","none");
			  				$("input[name='username']").parents(".edit_result").siblings(".show_result").css("display","block");
						} else {
							// 修改失败
							alert(data.message);
						}
					},
					error:function(data){
						
					}
				});
  		}
  		
  		// 修改真实姓名
  		function changeRealName(){
  			var real_name = $("input[name='real_name']").val();
  			if($.trim(real_name) == ""){
  				alert("请先填写真实姓名!");
  				return false;
  			}
  			$.ajax({
					url:"__URL__/saveRealName",
					type:"post",
					data:"real_name=" + real_name,
					dataType:"json",
					success:function(data){
						if(data.status == 200){
							//修改成功
							alert(data.message);
							$("input[name='real_name']").parents(".edit_result").siblings(".show_result").find("span").text(real_name);
							$("input[name='real_name']").parents(".edit_result").css("display","none");
			  				$("input[name='real_name']").parents(".edit_result").siblings(".show_result").css("display","block");
						} else {
							// 修改失败
							alert(data.message);
						}
					},
					error:function(data){
						
					}
				});
  		}
  		
  	</script>
  </head>

  <body>
<div class="myContainer col-xs-12 col-sm-12 col-md-12 col-lg-12" style="min-width:1000px;">
	  <div class="row whole-row" style="height:530px;">
	  		<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 contains" style="height:100%;width:75%;">
	  			<form class="form-horizontal" role="form" style="margin-top:15px;" id="personalFileForm" action="{:U('Index/savePersonInfo')}" method="post">
				   <div class="form-group">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;width:110px;">手机号:</label>
				      <div style="display:block;" class="show_result">
					      <span  class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-info-other" style="text-align:left;width:auto;">{$user.phone}</span>
					      <a href="#" class="col-xs-2 col-sm-2 col-md-2 col-lg-2  control-label label-operation editBtn" style="text-align:left;">[修改]</a>
				      </div>
				      <div style="display:none;" class="edit_result">
					      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
					         <input type="text" class="form-control int check-value-exist" name="phone" id="phone" maxlength=11 value="{$user.phone}"> 
					      </div>
					      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 info">
					         <button type="button" class="btn btn-primary edit-control-btn edit-confirm-btn" style="margin-right:10px;" onclick="changePhone();">确定</button>
			      			 <button type="button" class="btn btn-primary edit-control-btn edit-cancel-btn" style="">取消</button>
					      </div>
				      </div>
				   </div>
				  <div class="form-group">
				      <label for="email" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-title" style="text-align:left;">邮箱:</label>
				      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
				         <input type="text" class="form-control" name="email" id="email" value="{$user.email}"> 
				      </div>
				   </div>
				   <div class="form-group">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;width:110px;">会员名:</label>
				      <div style="display:block;" class="show_result">
					      <span  class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-info-other" style="text-align:left;width:auto;">{$user.user_code}</span>
					      <a href="#" class="col-xs-2 col-sm-2 col-md-2 col-lg-2  control-label label-operation editBtn" style="text-align:left;">[修改]</a>
				      </div>
				      <div style="display:none;" class="edit_result">
					      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
					         <input type="text" class="form-control check-value-exist" name="user_code" id="user_code" value="{$user.user_code}"> 
					      </div>
					      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 info">
					         <button type="button" class="btn btn-primary edit-control-btn edit-confirm-btn" style="margin-right:10px;" onclick="changeUsercode();">确定</button>
			      			 <button type="button" class="btn btn-primary edit-control-btn edit-cancel-btn" style="">取消</button>
					      </div>
				      </div>
				   </div>
				   <div class="form-group">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;">昵称:</label>
				      <div style="display:block;" class="show_result">
					      <span  class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-info-other" style="text-align:left;width:auto;">{$user.username}</span>
					      <a href="#" class="col-xs-2 col-sm-2 col-md-2 col-lg-2  control-label label-operation editBtn" style="text-align:left;">[修改]</a>
				      </div>
				      <div style="display:none;" class="edit_result">
					      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
					         <input type="text" class="form-control check-value-exist" name="username" id="username" value="{$user.username}"> 
					      </div>
					      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 info">
					         <button type="button" class="btn btn-primary edit-control-btn edit-confirm-btn" style="margin-right:10px;" onclick="changeUsername();">确定</button>
			      			 <button type="button" class="btn btn-primary edit-control-btn edit-cancel-btn" style="">取消</button>
					      </div>
				      </div>
				   </div>
				   <div class="form-group">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;width:140px;">真实姓名:</label>
				      <div style="display:block;" class="show_result">
					      <span  class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-info-other" style="text-align:left;width:auto;">{$user.real_name}</span>
					      <a href="#" class="col-xs-2 col-sm-2 col-md-2 col-lg-2  control-label label-operation editBtn" style="text-align:left;">[修改]</a>
				      </div>
				      <div style="display:none;" class="edit_result">
					      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
					         <input type="text" class="form-control " name="real_name" id="real_name" value="{$user.real_name}"> 
					      </div>
					      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 info">
					         <button type="button" class="btn btn-primary edit-control-btn edit-confirm-btn" style="margin-right:10px;" onclick="changeRealName();">确定</button>
			      			 <button type="button" class="btn btn-primary edit-control-btn edit-cancel-btn" style="">取消</button>
					      </div>
				      </div>
				   </div>
				   <div class="form-group">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;">性别:</label>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 info">
				         <select name="sex" class="form-control" style="padding:0;">
				         	<if condition="$user.sex eq 2">
				         		<option value="1">男</option>
				         		<option value="2" selected>女</option>
				         	<else />
				         		<option value="1" selected>男</option>
				         		<option value="2">女</option>
				         	</if>
				         </select>
				      </div>
				   </div>
				   <div class="form-group">
				      <label for="birthday" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;width:130px;">出生日期:</label>
				      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 info">
				         <!-- <input type="text" class="form-control" name="birthday" id="birthday">  -->
				         <div class="input-group date form_date" data-date="" id="datetimepicker" style="width:100%;">
		                    <input class="form-control" id="birthday" name= "birthday" size="16" type="text" value="{$user.birthday}" readonly
		                     style="background-color:#22AB39;width:auto;">
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
							<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
		                </div>
				      </div>
				   </div>
				   <div class="form-group">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;">证件:</label>
				      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info">
				         <select name="credentials_type" class="form-control" style="padding:0;padding-left:15px;">
				         	<if condition="$user.credentials_type eq 1">
				         		<option value="0">请选择证件类型</option>
					         	<option value="1" selected>身份证</option>
					         	<option value="2">学生证</option>
				         	<elseif condition="$user.credentials_type eq 2" />
				         		<option value="0">请选择证件类型</option>
					         	<option value="1">身份证</option>
					         	<option value="2" selected>学生证</option>
					         <else/>
					         	<option value="0">请选择证件类型</option>
					         	<option value="1">身份证</option>
					         	<option value="2">学生证</option>
				         	</if>
				         	
				         </select>
				      </div>
				       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
				         <input type="text" class="form-control" name="credentials" id="credentials" value="{$user.credentials}"> 
				      </div>
				   </div>
				   <div class="form-group">
				      <label  class="col-xs-3 col-sm-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;">座机:</label>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 info" style="padding-right:10px;">
				         <input type="text" class="form-control int" name="area_code" id="area_code" value="{$user.area_code}" maxlength=4>
				      </div>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding:0;width:20px;padding-top:5px;">
				         <label style="font-size:20px;color:white;font-weight:bold;">-</label>
				      </div>
				       <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info">
				         <input type="text" class="form-control int" name="telephone" id="telephone" value="{$user.telephone}" maxlength=8> 
				      </div>
				   </div>
				   <div class="form-group">
				      <label for="address" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;">地址:</label>
				      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
				         <input type="text" class="form-control" name="address" id="address" value="{$user.address}"> 
				      </div>
				   </div>
				   <div class="form-group">
				      <label for="postcode" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;">邮编:</label>
				      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info">
				         <input type="text" class="form-control int" name="postcode" id="postcode" value="{$user.postcode}" maxlength=8> 
				      </div>
				   </div>
				   <div class="form-group" style="float:right;margin-top:-20px;">
				      <button type="button" id="submitBtn" class="btn btn-primary" style="width:150px;color:white;margin-right:20px;font-size:18px;">确定</button>
				      <button type="reset" class="btn btn-primary" style="width:150px;color:white;margin-right:20px;font-size:18px;">取消</button>
				   </div>
				</form>
			</div>
			
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 contains" style="height:100%;margin-left:20px;width:22%;">
				<div class="row" style="color:white;text-align:center;padding-top:80px;">
					<strong class="strong">个人资料</strong><br>
  					<strong class="small">personal profile</strong> 	 	
				</div>
				<div class="row personcenter-list" style="">
					<strong><a href="{:U('Index/myMessages')}">我的消息</a></strong><br>
					<strong><a href="{:U('Index/myOrders')}">我的订单</a></strong><br>
					<strong><a href="{:U('Index/accountSecurity')}">账户安全</a></strong><br>
					<strong><a href="{:U('Index/releaseNotes')}">发布游记</a></strong><br>
					<strong><a href="{:U('Index/travelNotes')}">我的游记</a></strong>
				</div>
			</div>
	  </div>
      <div style="margin-top:30px;">
	  	<include file="Public:footer" />
	  </div>
</div>
  </body>
</html>
